<template>
  <d2-container>
    <el-row>
      <el-button type="success" @click="addTemplate()" round
        >新增模板</el-button
      >
    </el-row>
    <!--模板模态框-->
    <el-dialog
      :title="title1"
      width="30%"
      :visible.sync="dialogAddgsVisible1"
      @close="closeDialogAddgsVisible"
      :modal-append-to-body="false"
    >
      <el-form :model="Template" ref="addTemp" label-width="100px">
        <el-form-item label="模板名称" prop="tempName">
          <el-input
            v-model="Template.tempName"
            style="width: 75%"
            placeholder="请填写模板名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择部门"
          ><el-select
            v-model="deptOptions1"
            placeholder="请选择部门"
            multiple
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="dict in deptData"
              :key="dict.id"
              :label="dict.deptName"
              :value="dict.id"
            /> </el-select
        ></el-form-item>
        <el-row>
          <el-button type="success" @click="addAssessItem()" round
            >设置考核项</el-button
          >
        </el-row>
        <el-table :data="AssessItems" style="width: 100%">
          <el-table-column label="所属指标" width="120" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.ifpaName }}</template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddgsVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="saveAddTemplate()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 考核项模态框-->
    <el-dialog
      append-to-body
      :title="title2"
      width="30%"
      :visible.sync="dialogAddgsVisible2"
      @close="closeDialogAddgsVisible2"
      :modal-append-to-body="false"
    >
      <el-form :model="Template" ref="addAssess" label-width="100px">
        <el-form
          :inline="true"
          ref="addAssessFromDept"
          class="demo-form-inline"
        >
          <el-form-item label="选择部门"
            ><el-select
              v-model="deptOptions2"
              placeholder="请选择部门"
              multiple
              clearable
              :style="{ width: '200px' }"
            >
              <el-option
                v-for="dict in deptData"
                :key="dict.id"
                :label="dict.deptName"
                :value="dict.id"
              /> </el-select
          ></el-form-item>
          <el-form-item>
            <el-button type="primary" @click="findAssessItem">查询</el-button>
          </el-form-item>
          <!--表格-->
          <el-table
            ref="multipleTable"
            :data="tableData2"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="所属指标" width="120" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.ifpaName }}</template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddgsVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveAssessItem()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改模态框 -->
    <el-dialog
      :title="title3"
      width="30%"
      :visible.sync="dialogAddgsVisible3"
      @close="closeDialogAddgsVisible3"
      :modal-append-to-body="false"
    >
      <el-form :model="Template" ref="updateTemp" label-width="100px">
        <el-form-item label="模板名称" prop="tempName">
          <el-input
            v-model="Template.tempName"
            style="width: 75%"
            placeholder="请填写模板名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="修改部门"
          ><el-select
            v-model="deptOptions3"
            placeholder="请选择部门"
            multiple
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="dict in deptData"
              :key="dict.id"
              :label="dict.deptName"
              :value="dict.id"
            /> </el-select
        ></el-form-item>
        <el-row>
          <el-button type="success" @click="addAssessItem()" round
            >设置考核项</el-button
          >
        </el-row>
        <el-table :data="AssessItems" style="width: 100%">
          <el-table-column label="所属指标" width="120" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.ifpaName }}</template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddgsVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="updateTemplate()">确 定</el-button>
      </span>
    </el-dialog>
    <br />
    <!-- 表格 -->
    <el-table :data="tableData1" tooltip-effect="dark" style="width: 100%">
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->

      <el-table-column prop="templateName" label="模板名称" width="300">
        <template slot-scope="scope">{{ scope.row.templateName }}</template>
      </el-table-column>
      <el-table-column prop="type" label="考核类型" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.type }}</template>
      </el-table-column>
      <el-table-column prop="creator" label="创建人" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.creator }}</template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        show-overflow-tooltip
      >
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tablePages.currentPage"
        :page-size="tablePages.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tablePages.total"
      >
      </el-pagination>
    </div>
  </d2-container>
</template>

<script>
import qs from 'qs'
import util from '@/libs/util'
export default {
  data () {
    return {
      // 表格数据
      tableData1: [],
      tableData2: [],
      // 考核计划多选数据
      multipleSelection: [],
      AssessItems: [],
      assessIds: [],
      // 部门选择
      deptOptions1: [],
      deptOptions2: [],
      deptOptions3: [],
      // 部门数据
      deptData: [],
      tempAssessIds: [],

      Template: {
        tempName: '',
        id: ''
      },
      tablePages: {
        // 当前页数
        currentPage: 1,
        // 每页条数
        limit: 10,
        // 列表总数
        total: 0
      },
      title1: '',
      title2: '',
      title3: '',
      dialogAddgsVisible3: false,
      dialogAddgsVisible1: false,
      dialogAddgsVisible2: false,
      // dataList: [],
      // 对话框显示与否
      dialogVisible: false,
      dataloading: false
    }
  },

  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.tempAssessIds = val.map((item) => item.id)
      this.multipleSelection = val
      console.log('选择assess时', this.tempAssessIds)
    },
    addTemplate () {
      this.dialogAddgsVisible1 = true
      this.title1 = '新增模版'
    },
    addAssessItem () {
      this.dialogAddgsVisible2 = true
      this.title2 = '设置考核项'
    },
    saveAssessItem () {
      this.AssessItems = this.multipleSelection
      this.assessIds = this.tempAssessIds
      this.multipleSelection = []
      this.tempAssessIds = []
      this.dialogAddgsVisible2 = false
      console.log('Assess', this.AssessItems)
      console.log('保存assess', this.assessIds)
    },
    findAssessItem () {
      const arr1 = this.deptOptions2
      console.log('dept2:', arr1)
      this.$request({ url: 'item/findByDepts', params: { depts: arr1 + '' } })
        .then((res) => {
          console.log('后端指标数据', res)
          const data3 = res
          for (let v = 0; v < data3.length; v++) {
            this.tableData2.push({
              id: data3[v].id,
              ifpaName: data3[v].ifpaName
            })
          }
          console.log('tableData2:', this.tableData2)
        })
        .catch((err) => {})
    },
    saveAddTemplate () {
      const arr2 = this.deptOptions1
      const arr3 = this.assessIds
      const token = util.cookies.get('token') + ''
      console.log('添加模板时：', this.assessIds)
      this.$request({
        url: 'companyTemplate/addTemplate',
        method: 'post',
        data: qs.stringify({
          tempName: this.Template.tempName,
          type: '公司考核',
          creator: this.$store.state.d2admin.user.info.id,
          depts: arr2 + '',
          assessItems: arr3 + ''
        }),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: token
        }
      })
        .then((res) => {
          console.log('新增模板数据', res)
          this.deptOptions1 = []
          this.assessItems = []
          this.assessIds = []
          this.dialogAddgsVisible1 = false
          this.tablePages.currentPage = 1
          this.queryTemplat()
        })
        .catch((err) => {})
    },
    updateTemplate () {
      const arr4 = this.deptOptions3
      const arr5 = this.assessIds
      const token2 = util.cookies.get('token') + ''
      this.$request({
        url: 'companyTemplate/updateTemplate',
        method: 'post',
        data: qs.stringify({
          templateName: this.Template.tempName,
          id: this.Template.id,
          updatedId: this.$store.state.d2admin.user.info.id,
          depts: arr4 + '',
          assessItems: arr5 + ''
        }),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: token2
        }
      })
        .then((res) => {
          console.log('修改模板数据', res)
          this.deptOptions3 = []
          this.assessItems = []
          this.assessIds = []
          this.dialogAddgsVisible3 = false
          this.queryTemplat()
        })
        .catch((err) => {})
    },
    queryTemplat () {
      this.$request({
        url: 'companyTemplate/findAllTemplate',
        method: 'post',
        data: {
          currentPage: this.tablePages.currentPage,
          limit: this.tablePages.limit
        }
      })
        .then((res) => {
          this.tableData1 = []
          console.log('后端模板数据', res.list)
          const data4 = res.list
          for (let v = 0; v < data4.length; v++) {
            this.tableData1.push({
              id: data4[v].id,
              templateName: data4[v].templateName,
              type: data4[v].type,
              creator: data4[v].creator.id,
              date: data4[v].createTime
            })
          }
          console.log('tableData1:', this.tableData1)
        })
        .catch((err) => {})
    },
    handleEdit (index, row) {
      console.log(index, row)
      this.dialogAddgsVisible3 = true
      this.title3 = '修改模版'
      this.Template.tempName = row.templateName
      this.Template.id = row.id
    },
    /**
     * 页码发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} currentPage 切换后的当前页码
     */
    handleCurrentChange (currentPage) {
      this.tablePages.currentPage = currentPage
      this.queryTemplat()
    },
    /**
     * 页数发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} limit 切换后的每页条数
     */
    handleSizeChange (limit) {
      this.tablePages.limit = limit
      this.queryTemplat()
    },
    closeDialogAddgsVisible2 () {
      this.$refs.addAssessFromDept.resetFields() // element封装的方法,清空模态框的值
      this.deptOptions2 = []
      this.tableData2 = []
      this.title2 = '' // 初始化title的值
    },
    closeDialogAddgsVisible () {
      this.$refs.addTemp.resetFields()
      this.Template.tempName = ''
      this.deptOptions1 = []
      this.AssessItems = []
      this.title1 = '' // 初始化title的值
    },
    closeDialogAddgsVisible3 () {
      this.$refs.updateTemp.resetFields()
      this.Template.tempName = ''
      this.deptOptions3 = []
      this.AssessItems = []
      this.title3 = ''
    }
  },
  mounted () {
    this.$request({
      url: 'companyTemplate/findAllTemplate',
      method: 'post',
      data: {
        currentPage: this.tablePages.currentPage,
        limit: this.tablePages.limit
      }
    })
      .then((res) => {
        // 给表格总数赋值
        this.tablePages.total = res.total
        console.log('后端模板数据', res.list)
        const data1 = res.list
        for (let v = 0; v < data1.length; v++) {
          this.tableData1.push({
            id: data1[v].id,
            templateName: data1[v].templateName,
            type: data1[v].type,
            creator: data1[v].creator.id,
            date: data1[v].createTime
          })
        }
        console.log('tableData1:', this.tableData1)
      })
      .catch((err) => {})
    this.$request({
      url: 'dept/findAllDept',
      method: 'post'
    })
      .then((res) => {
        console.log('后端部门数据', res)
        const data2 = res
        for (let v = 0; v < data2.length; v++) {
          this.deptData.push({
            id: data2[v].id,
            deptName: data2[v].name
          })
        }
        console.log('deptData:', this.deptData)
      })
      .catch((err) => {})
  }
}
</script>
